<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- Chrome, Firefox OS and Opera -->
    <meta name="theme-color" content="#141852" />
    <!-- Windows Phone -->
    <meta name="msapplication-navbutton-color" content="#141852" />
    <!-- iOS Safari -->
    <meta name="apple-mobile-web-app-status-bar-style" content="#141852" />

    <!-- Primary Meta Tags -->
    <title>Happy Birthday to You!!!</title>
    <meta name="title" content="Happy Birthday to You" />
    <meta name="description" content="Wishing you a very Happy Birthday Dear" />

    <meta property="og:type" content="website" />
    <meta property="og:title" content="Happy Birthday to you" />
    <meta
      property="og:description"
      content="Wishing you a very Happy Birthday Dear"
    />
    <meta
      property="og:image"
      content="https://telegra.ph/file/cab24ce49882fbae39a13.png"
    />

    <link
      href="https://fonts.googleapis.com/css2?family=Courgette&display=swap"
      rel="stylesheet"
    />

    <!--Generated Read Time Var-->
    {{^READ_TIME}}

    <link rel="stylesheet" href="./scss/main.scss" />

    <!-- Favicon -->
    <link rel="apple-touch-icon" sizes="180x180" href="./resources/favicon/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="./resources/favicon/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="./resources/favicon/favicon-16x16.png">
    <link rel="manifest" href="./resources/favicon/site.webmanifest">

    <!-- animation    -->
    <script src="./js/index.js" type="module" defer></script>

    <!-- some extensions -->
  </head>
  <body>
    <!-- Sfx calling -->

    <audio class="blast-aud">
      <source src="./resources/sfx/blast.mp3" type="audio/mpeg" />
      Your browser does not support the audio element.
    </audio>
    <audio class="hbd-aud">
      <source src="./resources/sfx/hbd.mp3" type="audio/mpeg" />
      Your browser does not support the audio element.
    </audio>
    <audio class="switch-aud">
      <source src="./resources/sfx/switch.mp3" type="audio/mpeg" />
      Your browser does not support the audio element.
    </audio>
    <audio class="door-aud">
      <source src="./resources/sfx/door.mp3" type="audio/mpeg" />
      Your browser does not support the audio element.
    </audio>
    <audio class="haunt-aud">
      <source src="./resources/sfx/haunted-bgm.mp3" type="audio/mpeg" />
      Your browser does not support the audio element.
    </audio>

    <div class="content">
      <img
        src="./resources/img/flag-right.png"
        alt="flags"
        class="flag flag--c-left"
      />
      <img
        src="./resources/img/flag-left.png"
        alt="flags"
        class="flag flag--left"
      />
      <img
        src="./resources/img/flag-left.png"
        alt="flags"
        class="flag flag--c-right"
      />
      <img
        src="./resources/img/flag-right.png"
        alt="flags"
        class="flag flag--right"
      />
      <img
        src="./resources/img/balloon-left.png"
        alt="balloon-left"
        class="balloon balloon--left"
      />
      <img
        src="./resources/img/balloon-right.png"
        alt="balloon-right"
        class="balloon balloon--right"
      />
      <div class="frame">
        <div class="img-back">
          <div class="bd-pic"></div>
          <img class="cap" src="./resources/img/bday-cap.svg" alt="" />
          <img class="confetti" src="./resources/img/confetti.svg" alt="" />
          <img class="cake" src="./resources/img/cake.svg" alt="" />
          <div class="velas">
            <div class="fuego"></div>
            <div class="fuego"></div>
            <div class="fuego"></div>
            <div class="fuego"></div>
            <div class="fuego"></div>
          </div>
        </div>
        <div class="HBD-text">
          <p class="HBD">{{^HBD_MSG}}</p>
          <p class="nickname">{{^NICKNAME}}</p>
        </div>
      </div>

      <div class="frame frame2">
        <div class="scroll">
          <div class="text">{{^SCROLL_MSG}}</div>
      </div>
    </div>

    <div class="flash"></div>

    <div class="giftroom">
      <p class="gift-text">Wow! That was something weird.</p>
      <p class="gift-text">Hey look! There's a gift for you..</p>
      <p class="gift-text">C'mon, let's open it and see what's in there!</p>
    </div>

    <div class="hallway">
      <p class="hall-text">Hey!</p>
      <p class="hall-text">Maybe it's a bit late to move in the hallway,</p>
      <p class="hall-text">Things are creepy here...</p>
      <p class="hall-text">I think we should go back inside.</p>
    </div>

    <div class="empty-room">
      <p class="room-text">Ok! Why is it so empty here?</p>
      <p class="room-text">You know what, let's move outside.</p>
      <p class="room-text">Let's see if anyone's over there...</p>
    </div>

    <div class="darkroom">
      <p class="bb-text">Hey!</p>
      <p class="bb-text">Why is it so dark here?</p>
      <p class="bb-text">
        <span class="name">{{^NAME}}</span>! Can you please switch on the lights?
      </p>
    </div>

    <div class="btn switch"></div>
    <div class="btn-ref"></div>
  </body>
</html>
